﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>\(^o^)/~</title>
    <style>
     /*   span {
            background-image: linear-gradient(to right,red,blue);
            -webkit-background-clip: text;
            color: transparent;
            font-size: 36px;
        }
*/
        span {
            display: block;
            width: 600px;
            height: 100px;
            font-size: 36px;
            /*渐变背景*/
            background-image: linear-gradient(135deg, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
            color: transparent; /*文字填充色为透明*/
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
            background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
            /* 动画 */
            animation: masked-animation 3s infinite linear;
        }

        @keyframes masked-animation {
            0% {
                background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/
            }

            100% {
                background-position: -100% 0;
            }
        }
    </style>
</head>
<body>
    <span>
        服务启动成功(〃'▽'〃)
    </span>
</body>
</html>